<template>
  <div id="JobInfo">
    <div class="l-top">
      <ul class="c-header">
        <li class="c-header__title">{{ infoData.name }}</li>
        <li class="c-header__strong">{{ infoData.businessName }}</li>
        <li class="c-header__strong">{{ infoData.address }}</li>
        <li>招聘人数 {{ infoData.peopleNum }}</li>
        <li>岗位编号 {{ infoData.id }}</li>
      </ul>
      <van-icon name="arrow" class="l-top__icon active-able" @click="$pushRoute({path:'/list/company-info',query:{customId:infoData.businessid}})"/>
    </div>
    <section class="c-cell">
      <h3 class="c-cell__title">招聘要求</h3>
      <p>{{ infoData.conditions }}</p>
    </section>
    <section class="c-cell">
      <h3 class="c-cell__title">薪资待遇</h3>
      <p v-if="infoData.minsalary&&infoData.maxsalary">{{ infoData.minsalary }}-{{ infoData.maxsalary }}</p>
    </section>
    <section class="c-cell">
      <h3 class="c-cell__title">公司介绍</h3>
      <p>{{infoData.title}}</p>
    </section>
    <footer class="l-footer">
      <button @click="onSubmit" class="l-footer__btn">我要申请</button>
    </footer>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Prop} from "vue-property-decorator";
import {requestByGet, requestByPost} from "@/utils/request";

export const title = ""
@Component
export default class JobInfo extends Vue implements ComponentOptions<Vue> {
  name = "JobInfo"
  @Prop() customId!: string;
  infoData = {}

  async created() {
    this.infoData = await requestByGet(`/qqc/qqcPosts/queryById`, {id: this.customId});
  }

  async onSubmit() {
    const resume = await requestByGet(`/qqc/qqcResume/userList`, {userId: sessionStorage.getItem("userId")});
    if (!resume) {
      await this.$dialog.confirm({message: "你的简历不完整，完善后才可以投递职位哦", confirmButtonText: "去完善"});
      return this.$pushRoute("/mine/resume")
    }
    await this.$dialog.confirm({message: "确定要投递该职位吗？", confirmButtonText: "确定发送"});
    await requestByPost('/qqc/qqcApplyposts/add', resume);
    this.$toast.success("操作成功！");
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#JobInfo {
  min-height: 100vh;
  background: white;

  .l-top {
    position: relative;

    &__icon {
      position: absolute;
      right: 10px;
      top: 30px;
      font-size: 20px;
      padding: 20px;
    }
  }

  .c-header {
    padding: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: $tip-clr;

    &__title {
      font-size: 20px;
      color: $strong-clr;
    }

    &__strong {
      color: $strong-clr;
    }
  }

  .c-cell {
    padding: 16px;
    background: white;
    border-top: 12px solid #f5f5f5;
    line-height: 1.5;

    &__title {
      margin-bottom: 6px;
      font-size: 16px;
      font-weight: bold;
    }

    &:last-child {
      border-bottom: 12px solid #f5f5f5;
    }
  }

  .l-footer {
    @include absoluteFull(fixed);
    @include flex-center;
    padding: 8px 0;
    top: auto;
    box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, .1);

    &__btn {
      text-align: center;
      color: #fff;
      background: #349e7e;
      width: 90%;
      height: 44px;
      border-radius: 4px;
    }
  }
}
</style>
